<template>
  <view class="container">
    <!-- 返回导航栏 -->
    <view class="nav-bar">
      <text class="back-icon" @click="goBack">返回</text>
      <text class="title">基本信息</text>
    </view>

    <view class="form-container">
      <!-- 头像 -->
      <view class="form-item">
        <text class="label">头像</text>
        <view class="avatar-wrapper" @click="uploadAvatar">
          <image :src="userInfo.avatar || '/static/default-avatar.png'" class="avatar" mode="aspectFill" />
          <view class="edit-overlay">
            <text class="iconfont icon-camera"></text>
          </view>
        </view>
      </view>

      <!-- 昵称 -->
      <view class="form-item">
        <text class="label">昵称</text>
        <input
          type="text"
          v-model="userInfo.nickname"
          placeholder="请输入昵称"
          class="input"
          @blur="updateUserInfo"
        />
      </view>

      <!-- 性别 -->
      <view class="form-item">
        <text class="label">性别</text>
        <picker
          :value="genderIndex"
          :range="genderOptions"
          @change="handleGenderChange"
        >
          <text class="picker-text">{{ genderOptions[userInfo.gender] }}</text>
        </picker>
      </view>

      <!-- 生日 -->
      <view class="form-item">
        <text class="label">生日</text>
        <picker
          mode="date"
          :value="userInfo.birthday"
          start="1900-01-01"
          :end="currentDate"
          @change="handleBirthdayChange"
        >
          <text class="picker-text">{{ userInfo.birthday || '请选择生日' }}</text>
        </picker>
      </view>

      <!-- 手机号码 -->
      <view class="form-item">
        <text class="label">手机号码</text>
        <input
          type="number"
          v-model="userInfo.phone"
          placeholder="请输入手机号码"
          maxlength="11"
          class="input"
          @blur="updateUserInfo"
        />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'

// 用户状态管理
const userStore = useUserStore()

// 用户信息
const userInfo = ref({
  avatar: userStore.userInfo.avatar || '',
  nickname: userStore.userInfo.nickname || '',
  gender: userStore.userInfo.gender || 0, // 0: 未设置, 1: 男, 2: 女
  birthday: userStore.userInfo.birthday || '',
  phone: userStore.userInfo.phone || ''
})

// 初始化用户信息
onMounted(async () => {
  await userStore.fetchUserInfo()
  userInfo.value = {
    avatar: userStore.userInfo.avatar || '',
    nickname: userStore.userInfo.nickname || '',
    gender: userStore.userInfo.gender || 0,
    birthday: userStore.userInfo.birthday || '',
    phone: userStore.userInfo.phone || ''
  }
})

// 性别选项
const genderOptions = ['未设置', '男', '女']

// 当前日期
const currentDate = new Date().toISOString().split('T')[0]

// 上传头像
const uploadAvatar = () => {
  uni.chooseImage({
    count: 1,
    success: async (res) => {
      // TODO: 上传头像到服务器
      const tempFilePath = res.tempFilePaths[0]
      userInfo.value.avatar = tempFilePath
      await userStore.updateUserInfo({ avatar: tempFilePath })
      updateUserInfo()
    }
  })
}

// 修改性别
const handleGenderChange = (e: any) => {
  userInfo.value.gender =  e.detail.value
  updateUserInfo()
}

// 修改生日
const handleBirthdayChange = (e: any) => {
  userInfo.value.birthday = e.detail.value
  updateUserInfo()
}

const updateUserInfo = async () => {
  const success = await userStore.updateUserInfo({
    nickname: userInfo.value.nickname,
    avatar: userInfo.value.avatar,
    birthday: userInfo.value.birthday,
    gender: userInfo.value.gender,
    phone: userInfo.value.phone
  });
  
  if (success) {
    uni.navigateBack();
  }
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f8f8f8;
  padding-top: var(--status-bar-height);
  padding-bottom: var(--window-bottom);
}

.nav-bar {
  display: flex;
  align-items: center;
  padding: 20rpx 40rpx;
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 100;
  
  .back-icon {
    font-size: 28rpx;
    color: #333333;
  }
  
  .title {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    margin-right: 56rpx;
  }
}

.form-container {
  padding: 40rpx;
}

.form-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  
  .label {
    width: 160rpx;
    font-size: 30rpx;
    color: #333333;
  }
  
  .input {
    flex: 1;
    font-size: 30rpx;
    color: #333333;
  }
  
  .picker-text {
    flex: 1;
    font-size: 30rpx;
    color: #333333;
  }
  
  .avatar-wrapper {
    position: relative;
    width: 120rpx;
    height: 120rpx;
    border-radius: 60rpx;
    overflow: hidden;
    
    .avatar {
      width: 100%;
      height: 100%;
    }
    
    .edit-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 40rpx;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      
      .iconfont {
        font-size: 24rpx;
        color: #ffffff;
      }
    }
  }
}
</style>